import React, { Component, Fragment } from 'react';
import {
  Card,
  Row,
  Col,
  Descriptions,
  Table,
} from 'antd';

const { Item } = Descriptions;
interface BorrowingContractProps {
  detailInfos: any;
}

interface BorrowingContractState {
  franchiseeContractDetail: Object;
}

class BorrowingContract extends Component<BorrowingContractProps, BorrowingContractState> {
  state: BorrowingContractState = {
    franchiseeContractDetail: {},
  }

  static getDerivedStateFromProps(nextProps:any, preState: any) {
    const { detailInfos } = nextProps;
    const { franchiseeContractDetail } = preState;

    if (detailInfos !== franchiseeContractDetail) {
      return {
        franchiseeContractDetail: detailInfos,
      };
    }

    return null;
  }

  renderBasicInfoElem = (franchiseeContractDetail: any) => {
    const returnelem = (
      <Card title="基本信息" bordered={false} className="paddingB10">
        <Descriptions bordered size="small">
          <Item label="合同类型">借贷合同</Item>
          <Item label="合同主体">{franchiseeContractDetail.party_a_name}</Item>
          <Item label="合同编号">{franchiseeContractDetail.contract_num}</Item>
          <Item label="绑定销售合同">{franchiseeContractDetail.sale_contract_num}</Item>
        </Descriptions>
      </Card>
    );
    return returnelem;
  }

  renderBorrowingInfoElem = (franchiseeContractDetail: any) => (
    <Card title="借贷信息" bordered={false}>
      <Row gutter={16} style={{ marginBottom: 20 }}>
        <Fragment>
          <Col md={8} sm={24}>
            <Descriptions
              size="small"
              column={1}
            >
              <Item label="首付金额">
                {Number(franchiseeContractDetail.down_payment / 100).toFixed(2)} 元
              </Item>
              <Item label="借款金额">
                {Number(franchiseeContractDetail.loan_amount / 100).toFixed(2)} 元
              </Item>
              <Item label="借款期限">
                {franchiseeContractDetail.start_time}
              </Item>
              <Item label="年 利 率">
                {franchiseeContractDetail.annual_interest_rate} %
              </Item>
            </Descriptions>
          </Col>
        </Fragment>
      </Row>

      {this.renderNperList(franchiseeContractDetail.repayment_list)}
    </Card>
  )

  renderNperList = (repayment_list: any = []) => {
    const columns = [
      {
        title: '期数',
        dataIndex: 'period_num',
      },
      {
        title: '当期还款额',
        dataIndex: 'amount',
      },
      {
        title: '当期还款本金',
        dataIndex: 'principal',
      },
      {
        title: '当期还款利息',
        dataIndex: 'interest',
      },
      {
        title: '剩余本金',
        dataIndex: 'residual_principal',
      },
    ];

    const new_repayment_list = repayment_list.reduce((pre:any, cur:any) => {
      const {
        id: key,
        amount,
        principal,
        interest,
        residual_principal,
      } = cur;

      pre.push({
        ...cur,
        key,
        amount: (amount / 100).toFixed(2),
        principal: (principal / 100).toFixed(2),
        interest: (interest / 100).toFixed(2),
        residual_principal: (residual_principal / 100).toFixed(2),
      });
      return pre;
    }, []);


    return (
      <Table
        className="marginT24 tableList statementTable"
        columns={columns}
        dataSource={new_repayment_list}
      />
    );
  }

  render() {
    const { franchiseeContractDetail } = this.state;

    return (
      <Fragment>
        {this.renderBasicInfoElem(franchiseeContractDetail)}
        {this.renderBorrowingInfoElem(franchiseeContractDetail)}
      </Fragment>
    );
  }
}

export default BorrowingContract;
